<template>
    <DetailTopBackground :topBack="topBack" :logoImg="logoImg"/>
    <GameDescription/>
    <GamesNews :news="news"/>
    <StayUptoDate/>
    <CarouselVideo :allVideos="allVideos"/>
</template>

<script setup>
import DetailTopBackground from "@/views/Games/components/DetailTopBackground.vue";
import GameDescription from "@/views/Games/components/clashofclans/GameDescription.vue";
import StayUptoDate from "@/views/Games/components/clashofclans/StayUptoDate.vue";
import CarouselVideo from "@/views/Games/components/CarouselVideo.vue";
import GamesNews from "@/views/Games/components/GamesNews.vue";

import {reactive, ref} from "vue";

const topBack = ref("/src/assets/img/games/clans/topBack01.webp")
const logoImg = reactive({
    pic: '/src/assets/img/games/clans/logo.webp',
    width: '18%'
})

const news = reactive([
    {
        id: '001',
        category: 'Clash of Clans',
        title: 'The Friend or Foe Medal Event is here!',
        pic: '/src/assets/img/games/clans/news01.webp',
        router: 'commonNews',
        date: '8 Apr 2025',
        commonTitle: 'The Friend or Foe Medal Event is<br/>here!',
        content: 'Are you a Friend or a Foe?OverlordRHODES’ WWE Superstars are turning Army Camps into fighting rings! Looks like your Army is going to need more muscle to survive this chaotic Season!The Friend or Foe Medal Event is available to players with Town Hall 6 or above.When? Event Starts:April 8th, 8am UTCEvent Ends:April 29th 8am UTCAfter the event ends on April 29th, you can still access the Trader’s Event tab and the Medal Event Building for two more days.'
    }, {
        id: '002',
        category: 'Clash of Clans',
        title: 'Welcome to ClashaMania!',
        pic: '/src/assets/img/games/clans/news02.webp',
        router: 'commonNews',
        date: '1 Apr 2025',
        commonTitle: 'Welcome to ClashaMania!',
        content: 'WWE Superstars are here to Clash in our biggest Season yet! Welcome to ClashaMania!April 1-11: Clan War Leagues - Get your game face on! Clan War Leagues are here! And there’s no room for chumps!April 2-30: ClashaMania Scenery - The ClashaMania Scenery transforms your Village into a packed-out arena! The crowd is hurngry for action, so make your Village the Main Event.April 2-18: Season Challenges - Tackle epic WWE Season Challenges, including the chance to take on OverlordRHODES’ Village.April 4-30: Hero Skins - Heroes are honoring WWE mainstays by gearing up in Legendary Skins. King Cody, Brutality Queen, Prince Mysterio, Darkness Warden, and The RoyalEST are arriving!April 8-30: Fighting Rings - Army Camps are fighting rings?! WWE Superstars have settled down in your Village and turned Army Camps into fighting rings for ClashaMania. Some Superstars are friendly, but others… not so much!April 8-30: Friend or Foe Medal Event - Want extra muscle in your army? Unlock more Superstar temporary Troops from the Friend or Foe Medal Event and earn Champ Medals to unlock the Action Figure Epic Equipment for Archer Queen. Or, use those earned medals to get the Super Decoration - Surprise Wheel.April 14-20: Gold Rush! - Goblins stole the WWE title! Take part in the brand-new Gold Rush co-operative Clan Event to collect and contribute Gold Nuggets and build a new title.April 22-28: Clan Games - The Strongman is bringing Clan Games back, and he’s got rewards with your name on it. Work with your Clan to tackle tasks for awesome rewards!'
    }
])

const allVideos = reactive([
    {
        id: "001",
        src: "/src/assets/video/clans/video01.mp4",
        poster: "/src/assets/img/games/clans/poster/poster01.webp",
        description: "The Great Goblin Heist"
    },
    {
        id: "002",
        src: "/src/assets/video/clans/video02.mp4",
        poster: "/src/assets/img/games/clans/poster/poster02.webp",
        description: "The Tale of The Goblin Wizard"
    },
    {
        id: "003",
        src: "/src/assets/video/clans/video03.mp4",
        poster: "/src/assets/img/games/clans/poster/poster03.webp",
        description: "Party Wizard Party Time "
    },
    {
        id: "004",
        src: "/src/assets/video/clans/video04.mp4",
        poster: "/src/assets/img/games/clans/poster/poster04.webp",
        description: "Eight Clans Enter, One Clan Leaves"
    },
    {
        id: "005",
        src: "/src/assets/video/clans/video05.mp4",
        poster: "/src/assets/img/games/clans/poster/poster05.webp",
        description: "Come Back Builder!"
    }
]);
</script>

<style scoped>

</style>